<template>
  <!-- 之前版本 preivew页面不是子表单展示 -->
  <!-- <div class="form-preview-group column">
    <template v-for="item in previewFields">
      <div class="preview-group-item">
        <label>{{item.displayName}}</label> <span class="form-preview-notNull" v-if="item.isNull == 0">*</span>
        <div class="form-preview-mock">
            <p class="form-preview-control">
              {{ item.placeHolder }}
            </p>
        </div>
      </div>
    </template>
  </div> -->

  <!--  preivew类似子表单展示 -->
  <div class="form-subform-preview">
    <div class="form-preview-group">
      <label>
        {{ field.displayName }}
        <span class="form-preview-notNull" v-if="field.isNull == 0">*</span>
      </label>
      <div class="form-preview-mock">
        <!-- <span class="form-type-text">子表单</span> -->
      </div>
    </div>

    <div class="form-subform-preview-content">
      <div class="form-preview">
        <div
          class="form-design-preview"
          v-for="item in previewFields"
          :key="item.fieldName">
          <div class="form-preview-group">{{ item.displayName }}<span class="form-preview-notNull mar-l-3" v-if="item.isNull === 0">*</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { previewProps } from '@src/component/form/components/props';
import translate from '@src/component/form/mixin/translate.js'
export default {
  name: 'form-identity-preview',
  props: previewProps,
  mixins:[translate],
  computed: {
    previewFields() {
      const result = this.field?.setting?.settingFields || []
      return result.filter(field=> field.setting.show)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@src/component/form/components/FormSubForm/FormSubForm.scss';


/* .column{
  flex-direction: column;
  padding: 0;
  background: transparent;
  .preview-group-item{
    display: flex;
    background-color: #fff;
    padding: 14px 10px;
    margin-bottom: 1px;
    &:last-child{
      margin-bottom: 0;
    }
    label{
      width: auto;
      max-width: 110px;
      line-height:  14px;
    }
  }
} */
</style>